<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon-precomposed" href="mobile_logo.png?v1" />
    <title>请假详情</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="./css/reset.css"/>
    <link rel="stylesheet" href="./css/leave.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2582130_flfowzv5gb7.css"/>
    <script src="./js/vue.js"></script>
    <script>
        // 设计图比例：宽1242
        var w=document.documentElement.getBoundingClientRect().width;
        var bili=w/12.42;
        document.documentElement.style.fontSize=bili+"px";
    </script>
</head>
<body>
  <div id="root">
    <header class="header">
      <div class="header_btn">
        <button ><span class="iconfont icon-chacha"></span></button>
        <button ><span class="iconfont icon-fanhui"></span></button>
      </div>
      详情
    </header>
    <section class="section">
      <div class="section_figure">
        <div class="section_figure_img"><img src="images/7-1请假详情_爱奇艺_03.png" alt=""></div>
        <div class="section_figure_text">
          <p class="section_figure_text1">张新诚提交的请假申请直</p>
          <p class="section_figure_text2">属行政执法队一中队待</p>
          <p class="section_figure_text3">审批</p>
        </div>
      </div>
      <div class="leave-type">
        <div>
          <div>请假类型</div>
          <div>事假</div>
        </div>
        <div>
          <div>开始时间</div>
          <div>2021-05-24 09：30</div>
        </div>
        <div>
          <div>结束时间</div>
          <div>2021-05-2511：30</div>
        </div>
        <div>
          <div>需要时长</div>
          <div>9.5小时</div>
        </div>
        <div>
          <div>审批编号</div>
          <div>202105241430358736</div>
        </div>
      </div>
      <div class="whyshare">
        <p class="whyshare_1">请假事由</p>
        <p>参加军事摄影大赛，准备了好久。参加军事摄影大赛，准备了好久。</p>
        <div class="whyshare_img">
          <img src="./images/7-1请假详情_爱奇艺_06.png" alt="" v-for="item in imgarr" :key="item">
          <!-- <img src="./images/7-1请假详情_爱奇艺_06.png" alt="">
          <img src="./images/7-1请假详情_爱奇艺_06.png" alt=""> -->
        </div>
      </div>
      <div class="number">
        本月共申请3次
      </div>
    </section>
    <div class="fill"></div>
    <footer class="footer">
      <div class="footer-btn">
        <button>撤销</button>
        <button>修改</button>
      </div>
    </footer>
  </div>
    <script>
      var vm=new Vue({
        el:"#root",
        data:{
          imgarr:[1,2,3]
        }
      })
    </script>
</body>
</html>